<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/students/notices'}">学生</el-breadcrumb-item>
      <el-breadcrumb-item>学生选题管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生选题</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <!-- <div style="text-align:center">
        <el-input 
          style="width:60%" 
          v-model="searchKey" 
          prefix-icon="el-icon-search" 
          placeholder="请输入搜索内容" 
          @keyup.enter.native="fuzzySearch">
        </el-input>
        <el-button  style="margin-left:30px" type="primary" plain icon="el-icon-search" @click.native="fuzzySearch">搜索</el-button>
        <el-button  style="margin-left:30px" type="success" plain icon="el-icon-delete" @click.native="cancleSearch">取消</el-button>
      </div> -->
      <!--表格区域-->
      <el-table :data="showChooseList" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="课题题目" prop="sub.name"></el-table-column>
        <el-table-column align="center" label="课题类型" width="120">
          <template slot-scope="scope"> 
            <el-tag  type="info">{{scope.row.sub.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源" width="120">
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.sub.source.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="指导老师" width="150">
          <template slot-scope="scope"> 
            <span>{{scope.row.tea.name}} ({{scope.row.tea.id}})</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报时间" width="120">
          <template slot-scope="scope"> 
            <span>{{$moment(scope.row.sub.declareTime).format('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否可选" width="120">
          <template slot-scope="scope">
            <el-tag effect="dark"  type="success" v-if="scope.row.sub.status === 3">可选</el-tag>
            <el-tag effect="dark"  type="danger" v-else-if="scope.row.sub.status === 2">不可选</el-tag>
            <el-tag effect="dark"  type="info" v-else>已被选</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary"  round size="mini" @click="showDetail(scope.row)">详情</el-button>
            <el-button type="success" round size="mini" :disabled="scope.row.sub.status !== 3" @click="selectSubject(scope.row.sub.id)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </el-card>
    <!--课题详情对话框-->
    <el-dialog title="课题详情" :visible.sync="dialogVisible" >
      <el-form label-width="80px" style="margin:0 16%">
        <el-form-item label="课题名称">
          <el-input :value="subjectDetail.sub.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="课题类型">
          <el-input :value="subjectDetail.sub.type.label" readonly></el-input>
        </el-form-item>
        <el-form-item label="课题来源">
          <el-input :value="subjectDetail.sub.source.label" readonly></el-input>
        </el-form-item>
        <el-form-item label="发布教师">
          <el-input :value="`${subjectDetail.tea.name} (${subjectDetail.tea.id})`" readonly></el-input>
        </el-form-item>
        <el-form-item label="教师职称">
          <el-input :value="subjectDetail.tea.job" readonly></el-input>
        </el-form-item> 
        <el-form-item label="教师电话">
          <el-input :value="subjectDetail.tea.phone" readonly></el-input>
        </el-form-item>
        <el-form-item label="教师邮箱">
          <el-input :value="subjectDetail.tea.email" readonly></el-input>
        </el-form-item>
        <el-form-item label="课题简介">
          <el-input :value="subjectDetail.sub.introduce" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>  
  import {getCanSelectSubjectByPage, getCanSelectSubjectTotal, selectSubjectById, judgeStudentCanChooseOrNot} from '../../axios/subject'  
  export default {
    name: 'StudentSubjectChoose',
    data() {
      return { 
        pageParam:{  currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1, // 所有可选的课题列表的总数  
        showChooseList: [], // 展示在页面上的课题列表 
        dialogVisible: false, // 课题详情对话框的显示/隐藏
        canChoose: true,
        // 课题详情
        subjectDetail: {
          tea: {}, 
          sub:{
            type:{},
            source:{}
          }
        }, 
        // searchKey: '' // 模糊搜索关键字
      }
    },
    methods: {
      // 获取可选课题列表总数
      getCanChooseTotal(){
        getCanSelectSubjectTotal().then(res => {
          if(res.success){
            this.total = res.data 
          } 
        }) 
      },
      // 获取指定页的可选课题列表
      getSubjectOfPage(){ 
        // 发送后端请求，获取指定页的课题列表
        getCanSelectSubjectByPage(this.pageParam).then(res => {
          if(res.success){
            this.showChooseList = res.data 
          }  
        }) 
      },
      // 显示某一课题的详情，参数 rowData 中包含有改课题的所有详细信息
      showDetail(rowData){ 
        this.dialogVisible = true
        this.subjectDetail = rowData
      },
      // 选择课题
      selectSubject(subjectId){
        if(!this.canChoose){
          this.$message.warning('您已选课题，不能再选哦！')
          return 
        } 
        this.$confirm('确认选择此课题吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 确定选择课题，则发送后端请求
          selectSubjectById(subjectId).then(res => {
            if(res.success){
              this.$message.success('选择课题成功')
              this.canChoose = false
              this.getSubjectOfPage()
            } 
          })  
        }).catch(() => {
          this.$message.info('已取消提交!')
        })
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getSubjectOfPage()  
      },
      // 模糊查询
      // fuzzySearch(){
      //   let search = this.searchKey.trim()
      //   console.log(search)
      //   if(search === ''){
      //     this.$message.warning('请输入查询条件')
      //     return 
      //   }
      //   // 过滤出 name 中含有搜索关键字的课题信息
      //   this.showChooseList = this.canChooseList.filter(item => item.sub.name.indexOf(search) > -1)
      // },
      // cancleSearch(){
      //   // 将展示课题列表重新赋值为原生课题列表
      //   this.searchKey = ''
      //   this.showChooseList = this.canChooseList
      // }
    }, 
    created(){
      // 组件一创建，需要获取后端中可选课题的总数以及第一页的数据。
      this.getCanChooseTotal() 
      this.getSubjectOfPage() 
      judgeStudentCanChooseOrNot().then(res => {
        if(res.success){
          this.canChoose = res.data 
        }  
      })
    }, 
  }
</script>

<style scoped>
  /* .el-form-item .el-input {
    width: 10%;
  } */
</style>